{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}项目&任务详细信息{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.min.css' %}">
    <style>
        .panel-default {
            margin-top: 10px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-info {
            margin-top: 10px;
        }

        .panel-info .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-body {
            padding: 0;
        }

        .title-list {
        {#右边框#} border-right: 1px solid #dddddd;
        {#最小高度#} min-height: 500px;
        }

        .title-list ul {
            padding-left: 15px;
            padding-top: 20px;
        }

        .title-list ul a {
            display: block;
            padding: 5px 0;
        }

        .content {
        {#左边框#} border-left: 1px solid #dddddd;
            min-height: 600px;
        {#向左移-1px,与title-list 重合#} margin-left: -1px;
        }

        .panel-body {
        {#panel-body 默认带边距,这里设置为0#} padding: 0;
        }

        .color-radio label {
            margin-left: 0;
            padding-left: 0;
        }

        .color-radio input[type="radio"] {
            display: none;
        }

        .color-radio input[type="radio"] + .cycle {
            display: inline-block;
            height: 22px;
            width: 22px;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }

        .color-radio input[type="radio"]:checked + .cycle {
            border: 2px solid black;
        }

        th {
            text-align: center;
        }

        td {
            text-align: center;
        }

        .box1{
            width: 100px;
            height: 20px;
            /* background-color: #666666; */
            position: fixed;
            left: 30px;
            top: 100px;
        }
        #id_big_project{
            width: 20px;
            height: 20px;
        }

    </style>
{% endblock %}

{% block content %}
    <!-- project 项目 -->
    <div class="container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div>
                    <i class="fa fa-book" aria-hidden="true">SR No#: {{ SR_No }} | 名称：{{ c_name }}</i>
                </div>
                <div class="function">
                    {% if owner == request.sa %}
                        <button id='ProjectEditSave' type="button" class="btn btn-xs btn-warning">
                            <i class="fa fa-edit" aria-hidden="true"> Save Project</i>
                        </button>
                        <button id='OpenRemoveProject' p_id="{{ project_id }}" p_name="{{ c_name }}"
                                SR_No="{{ SR_No }}" type="button" class="btn btn-xs btn-danger">
                            <i class="fa fa-trash" aria-hidden="true"> 删除</i>
                        </button>
                    {% endif %}
                </div>
            </div>
            <div class="panel-body" style="margin: 10px">
                <form id="form_project" novalidate method="post">
                    {% csrf_token %}
                    {% for field in project_form %}
                        {% if field.name == 'desc' %}
                            <div class="row">
                                <div class="form-group" style="margin-left: 15px; margin-right: 15px">
                                    <div class="col-md-12" style="position: relative; margin-bottom: 20px">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                        <div class="row clearfix">
                                            <div id='project_editor' class="col-md-12">
                                                {{ field }}
                                                {# <!-- <span class="error-msg">{{ field.errors.0 }}</span> -->#}
                                                <span class="error-msg"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="form-group">
                                <div class="col-md-3" style="position: relative; margin-bottom: 20px">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                    {{ field }}
                                    <span class="error-msg"></span>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </form>
            </div>
        </div>
    </div>

    <!-- 删除项目模态框 -->
    <div class="modal fade" id="deleteProjectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">

            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <!-- id="deleteInfo" 增加id选择器, 通过选择器个修改显示内容 -->
                <h4 id="deleteProjectInfo">是否确定删除!</h4>
                <p style="margin: 10px 0;">删除后,所有关联的相关数据都会被删除</p>
                <p style="text-align: right">
                    <!-- data-dismiss="modal"  关闭对话框 -->
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id='btnConfirmDeleteProject' type="button" class="btn btn-danger">确 定</button>

                </p>
            </div>

        </div>
    </div>

    <!-- Task  -->
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div>
                    <i class="fa fa-book" aria-hidden="true"> Task No#: {{ task_obj.task_number }} &
                        创建者：{{ task_obj.creator }}</i>
                </div>

                <div class="function">
                    {% if request.project.status != 'Completed' %}

                        <input id="AddTask" type="button" class="btn btn-success btn-xs" value="新建 Task">
                        {% if task_obj.project.sa == request.sa or task_obj.creator == request.sa %}
                            <button id='TaskEditSave' type="button" class="btn btn-xs btn-warning">
                                <i class="fa fa-edit" aria-hidden="true"> Save Task</i></button>
                            <a type="button" class="btn btn-danger btn-xs delete_task"
                               href="{% url 'task_delete' p_id=project_id t_id=task_obj.id %}">
                                <i class="fa fa-trash" aria-hidden="true"></i> 删除</a>

                        {% endif %}

                    {% endif %}


                </div>

            </div>

            <div class="panel-body">

                <div class="col-sm-2 title-list">
                    <!-- 手动增加一个id -->
                    <ul id="catalog">

                        {#            {% for value in catalog_list %}#}
                        {#                <li>#}
                        {#                    <!-- 模板语言取元组value.0， 不能使用value[0] -->#}
                        {#                    <a href="#">{{ value.0 }}</a>#}
                        {#                </li>#}
                        {#            {% endfor %}#}

                    </ul>
                </div>

                <div class="col-sm-10 content">
                    {% if task_obj %}
                        {#   {{ task_obj.content }} #}
                        <div class="panel-body" style="margin: 10px">
                            <form id="form_task" novalidate method="post">
                                {% csrf_token %}
                                {% for field in form3 %}
                                    {% if field.name == 'content' %}
                                        <div class="row">
                                            <div class="form-group" style="margin-left: 15px; margin-right: 15px">
                                                <div class="col-md-12" style="position: relative; margin-bottom: 20px">
                                                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                                    <div class="row clearfix">
                                                        <div id="task_editor" class="col-md-12">
                                                            {{ field }}
                                                            {# <!-- <span class="error-msg">{{ field.errors.0 }}</span> -->#}
                                                            <span class="error-msg"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="form-group">
                                            <div class="col-md-3" style="position: relative; margin-bottom: 20px">
                                                <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                                {{ field }}
                                                <span class="error-msg"></span>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </form>
                        </div>

                    {% else %}
                        <div style="text-align: center; margin-top: 150px">
                            <h4>SR No: {{ SR_No }}</h4>
                            <h4>项目名称： {{ c_name }}</h4>
                            {# <a href="{% url 'task_add' p_id=project_id %}">#}
                            {# <i class="fa fa-plus-square" aria-hidden="true"> 新建Task</i>#}
                            {# </a>#}
                            {% if request.project.status != 'Completed' %}
                                <button id="NewTask" class="btn btn-primary btn-sm">
                                    <i class="fa fa-plus-square" aria-hidden="true"> 新建Task</i>
                                </button>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!--task 模态框-->
    <div class="modal fade" id="TaskModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <div class="alert alert-info fade in" role="alert">
                        <h4 id="alert_info">占位字符</h4>
                        <h4 id="alert_info1">占位字符</h4>
                        <p style="margin: 10px 0;">请确认选择项目是否正确！！！</p>

                    </div>
                </div>
                <div class="modal-body">
                    <form id="form1" novalidate>
                        {% csrf_token %}
                        {% for field in task_form %}
                            {% if field.name == 'content' %}
                                <div class="row">
                                    <div class="form-group" style="margin-left: 15px; margin-right: 15px">
                                        <div class="col-md-12" style="position: relative; margin-bottom: 20px">
                                            <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                            <div class="row clearfix">
                                                <div id="editor_task" class="col-md-12">
                                                    {{ field }}
                                                    <!--
                                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                                    -->
                                                    <span class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {% else %}
                                <div class="form-group">
                                    <div class="col-md-3" style="position: relative; margin-bottom: 20px">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                        {{ field }}
                                        <span class="error-msg"></span>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="box1">
        <span style="color: red">可以更改项目所有者和参与者！</span>
    </div>

{% endblock %}

{% block js %}
    <script>

        var DELECT_P_ID
        var CHOOSER
        // http://127.0.0.1:8001/project/22/manage/
        var PROJECT_URL = '{% url 'project_view' p_id=project_id %}'

        // 页面加载时,将 task模态框的 id='form1', 的标签id属性增加 _new
        $(function () {
            $('#form1').find('input,select,textarea').each(function () {
                if (this.id) {
                    $(this).attr('id', this.id + '_new')
                }
            })
        })

        $(function () {
            // 选择 big_project
            selectBigProject();
            // 绑定 Project Edit 事件
            bindProjectEdit();
            // 打开 Project 删除模态框
            bindOpenProjectDelete();
            // 删除 Project 项目
            bindConfirmRemoveProject()
            // 打开新建Task模态框
            bindBtnAddTask();
            // Task Submit 判断
            bindBtnSubmit();
            // 初始化 Task 的目录  当页面加载完成后，用ajax去执行读取数据
            initCatalog();
            // 绑定 Task Edit 事件
            bindTaskEdit();
            // 页面加载时调用 editTaskTimsBetween 函数, 有默认值也执行
            editTaskTimesBetween();
            // 绑定 change 事件 有变化也执行 calculateTimesBetween 函数
            $('#id_start_time_new, #id_end_time_new, #id_start_time, #id_end_time').change(function () {
                editTaskTimesBetween()
            });
            //  task任务类型 change 事件
            $('#id_task_type_new, #id_task_type').change(function () {
                changeTaskType()
            });

        })

        // big_project 项目选取
        function selectBigProject() {
            let getBigProject = document.getElementById('id_big_project');
            let getValue = document.getElementById('id_value');
            // checked 属性是专门用于 <input> 元素（如复选框 <input type="checkbox"> 和单选按钮 <input type="radio">）的，以检查该元素是否被选中。
            if(getBigProject.checked === false){
                getValue.setAttribute('readOnly', true);
            }else{
                getValue.removeAttribute('readOnly');
            }
            getBigProject.onchange = function () {
                if(getBigProject.checked){
                    getValue.removeAttribute('readOnly');
                }else {
                    getValue.value = 0;
                    getValue.setAttribute('readOnly', true);
                }
            }
        }

        // 修改project
        function bindProjectEdit() {
            $('#ProjectEditSave').click(function () {
                console.log({{ project_id }});
                $.ajax({
                    url: '{% url 'project_view' p_id=project_id %}',
                    type: 'post',
                    datatype: 'JSON',
                    data: $('#form_project').serialize(),
                    success: function (data) {
                        if (data.status) {
                            alert(data.info);
                            location.href = data.skip;
                        } else {
                            console.log(data.error);
                            $.each(data.error, function (key, value) {
                                console.log(key + '......' + value);
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })

        }

        // 打开删除project 模态框
        function bindOpenProjectDelete() {
            $('#OpenRemoveProject').click(function () {
                $('#deleteProjectModal').modal('show');
                var TaskNo = $(this).attr('SR_No');
                var P_NAME = $(this).attr('p_name');
                DELECT_P_ID = $(this).attr('p_id');
                $('#deleteProjectInfo').text('是否要删除 SR#:' + TaskNo + ' ' + P_NAME + ' ！');
                console.log('选中的p_id是:' + DELECT_P_ID);
            })
        }

        // 删除项目 project
        function bindConfirmRemoveProject() {
            $('#btnConfirmDeleteProject').click(function () {
                $.ajax({
                    url: '{% url 'project_delete' p_id=project_id %}',
                    type: 'get',
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.status) {
                            alert('删除完成');
                            window.location.href = data.skip;
                        } else {
                            alert(data.error_info);
                        }
                    }
                })
            })
        }

        // 增加task 打开 Modal
        function bindBtnAddTask() {
            $('#NewTask, #AddTask').click(function () {
                CHOOSER = 1;
                $('#id_total_time_new').attr('readonly', true);
                $('#alert_info').text('正在对项目： ' + '{{ c_name }}' + '  创建新Task');
                $('#alert_info1').text('当前项目的 SR No#： ' + '{{ SR_No }}');
                $('#form1')[0].reset();
                $('.error-msg').empty();
                $('#TaskModal').modal('show');
            })
        }

        // task Submit 路由判断
        function bindBtnSubmit() {
            $('#btnSubmit').click(function () {
                $('.error-msg').empty();
                if (CHOOSER == 1) {
                    doAdd();
                }
                if (CHOOSER == 2) {
                    doEdit();
                }
            })
        }

        // CHOOSER == 1 执行增加项目
        function doAdd() {
            $.ajax({
                url: '{% url 'task_add' p_id=project_id %}',
                type: 'post',
                datatype: 'JSON',
                data: {
                    'sub_number': $('#id_sub_number_new').val(),
                    'task_type': $('#id_task_type_new').val(),
                    'task_date': $('#id_task_date_new').val(),
                    'start_time': $('#id_start_time_new').val(),
                    'end_time': $('#id_end_time_new').val(),
                    'overtime': $('#id_overtime_new').val(),
                    'task_server_num': $('#id_task_server_num_new').val(),
                    'task_mfd_num': $('#id_task_mfd_num_new').val(),
                    'task_printer_num': $('#id_task_printer_num_new').val(),
                    'total_time': $('#id_total_time_new').val(),
                    'content': $('#id_content_new').val(),
                },
                success: function (data) {
                    if (data.status) {
                        alert(data.tips1);
                        $('#TaskModal').modal('hide');
                        location.reload();
                    } else {
                        console.log(data.error);
                        $.each(data.error, function (key, value) {
                            console.log(key + '...' + value);
                            $('#id_' + key + '_new').next().text(value[0]);
                        })
                    }
                }
            })
        }

        // 初始化 Task 目录 当页面加载完成后，用ajax去执行读取数据
        function initCatalog() {
            $.ajax({
                url: '{% url 'task_catalog' p_id=project_id %}',
                type: 'get',
                datatype: 'JSON',
                success: function (data) {
                    if (data.status) {
                        console.log(data);
                        // item 是一个对象，包含了 task的 id 和 task_number
                        $.each(data.catalog_list, function (index, item) {
                            console.log(index + '...' + item.id + '...' + item.task_number);
                            // 拼接 url   http://127.0.0.1:8001/project/22/manage/?task_id=3
                            var href = PROJECT_URL + '?task_id=' + item.id;
                            // $('<li>').attr('id', 'id_'+ item.id) 增加li标签 和 id 属性
                            // append($('<a>')) 追加一个 a 标签, 增加链接 href 属性 , a 标签的文本内容是 item.task_number
                            // append($('<ul>')) 再追加一个ul标签, 如果需要
                            var li = $('<li>').attr('id', 'id_' + item.id).append($('<a>').attr('href', href).text(item.task_number)).append($('<ul>'));
                            // 把 li 追加到 #catalog的 ul 标签下
                            $('#catalog').append(li);
                        })
                    } else {
                        console.log(data.error_info);
                    }
                }

            })

        }

        // 编辑task
        function bindTaskEdit() {
            $('#TaskEditSave').click(function () {
                $.ajax({
                    {#url: '{% url 'task_edit' p_id=project_id t_id=task_obj.id %}',#}
                    url: '/project/' + {{ project_id }} + '/task/' + {{ task_obj.id }} + '/edit/',
                    type: 'post',
                    data: $('#form_task').serialize(),
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.status) {
                            alert(data.tips);
                            location.href = data.skip;
                        } else {
                            console.log(data.error);
                            $.each(data.error, function (name, value) {
                                console.log(name + '...' + value);
                                $('#id_' + name).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        // 删除task
        $('.delete_task').click(function (event) {
            // 阻止事件的默认行为。例如，阻止表单的提交或链接的跳转。
            event.preventDefault();
            if (confirm('确定要删除Task No: {{ task_obj.task_number }}')) {
                window.location.href = this.href;
                console.log('删除成功');
            } else {
                console.log('取消删除');
                location.reload();
            }
        })

        // edit时计算时间差
        function editTaskTimesBetween() {
            $('#id_total_time_new, #id_total_time').attr('readonly', true);
            // 新建 task
            var startTime = $('#id_start_time_new').val();
            var endTime = $('#id_end_time_new').val();
            //console.log(typeof (startTime), startTime);
            //console.log(typeof (endTime), endTime);
            // 修改 task
            var edit_startTime = $('#id_start_time').val();
            var edit_endTime = $('#id_end_time').val();

            // 确保两个日期都已被选择  将字符串日期转换为Date对象
            if (startTime && endTime) {
                // Date 对象必须有 日期信息才完整
                // new Date() 是一个构造函数，用于创建一个表示日期和时间的 Date 对象。
                // var now = new Date() 这个对象包含了当前日期和时间的各种信息，如年、月、日、小时、分钟、秒和毫秒。
                var start = new Date('2024-01-01T' + startTime);
                var end = new Date('2024-01-01T' + endTime);
                // Math.round 四舍五入
                var diff = Math.round((end - start) / (1000 * 60));
                console.log(typeof (diff), diff);
                // // .text() 是用于更改元素（如 <div>、<span> 等）的文本内容，而不是输入字段的值。
                $('#id_total_time_new').val(diff);
            } else {
                $('#id_total_time_new').val(0);
            }
            if (edit_startTime && edit_endTime) {
                var edit_start = new Date('2024-01-01T' + edit_startTime);
                var edit_end = new Date('2024-01-01T' + edit_endTime);
                var edit_diff = Math.round(edit_end - edit_start) / (1000 * 60);
                $('#id_total_time').val(edit_diff);
            } else {
                $('#id_total_time').val(0);
            }

        }

        // 模态框 任务类型 change 事件
        function changeTaskType() {
            // m_tasktype 模态框的TaskType 变更
            var m_tasktype = $('#id_task_type_new').val();
            // edit taskType
            var e_tasktype = $('#id_task_type').val();
            // console.warn('新建当前task任务类型是：', m_tasktype);
            // console.warn('修改当前task任务类型是：', e_tasktype);
            if (m_tasktype === '添加设备') {
                // 虽然 attr() 方法在这里可以工作，但 jQuery 推荐使用 prop() 方法来处理属性，
                // 特别是当属性是布尔值时（如 readonly、checked、disabled 等）。
                // 这是因为 prop() 方法能够更准确地反映元素的当前状态。
                // $('#id_task_server_num_new').prop('readonly', true).val(1);
                $('#id_task_server_num_new').prop('readonly', true);
            } else {
                // $('#id_task_server_num_new').prop('readonly', false).val(0);
                $('#id_task_server_num_new').prop('readonly', false);
            }
            if (e_tasktype === '添加设备') {
                $('#id_task_server_num').prop('readonly', true);
            } else {
                $('#id_task_server_num').prop('readonly', false);
            }

        }

        $(function () {
            // 设置初始状态 直接调用函数以设置初始的 readonly 状态,
            changeTaskType();   // 相当于页面加载时执行了一次
            // 为 #id_task_type_new 元素绑定 change 事件
            $('#id_task_type_new, #id_task_type').on('change', changeTaskType);
        })

    </script>
{% endblock %}